<template>
  <div class="w-bgc">
    <div class="mb16">
      <el-form
        :inline="true"
        :model="formInline"
        label-width="auto"
        :label-position="'Right'"
        class="form-inline"
      >
        <el-form-item label="挂号时间:">
          <el-date-picker
            style="width: 335px"
            v-model="formInline.date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="单据号:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="票据号:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="科室:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="医生:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="费别:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="号类:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>

        <el-form-item label="挂号员:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="身份类别:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="结算方式:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="退号记录:">
          <el-checkbox v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
      </el-form>
      <div class="flex j-s-b a-c">
        <div>
          <el-button type="primary" plain @click="registration">挂号</el-button>
          <el-button type="primary" plain @click="search">查询</el-button>
          <el-button type="primary" plain> 查看</el-button>
        </div>
        <div>
          <el-button type="danger" plain>退号</el-button>
        </div>
      </div>
    </div>
    <!-- 挂号管理-->
    <s-table
      :showLoading="showLoading"
      :data="tableData"
      :hasPage="true"
      :page="page"
      @pageChange="pageChange"
      :columns="columns"
    ></s-table>
  </div>
  <registrationDialog v-model="visible" />

  <s-dragBox>
    <div>我是内容</div>
  </s-dragBox>
  <s-supen />
</template>
<script setup lang="ts">
import registrationDialog from "@common/src/components/registrationDialog/index.vue";
import { useTion } from "./registration";
const { visible, registration } = useTion();
import { usegTablePage } from "@common/src/hooks/table.ts";
function search() {}
const formInline = reactive({
  date: "",
});
const hander = () => {
  console.log(1);
};
const columns = reactive([
  {
    type: "index",
    align: "center",
    label: "序号",
    width: "50",
  },
  {
    label: "医保",
    prop: "test",
  },
  {
    label: "单据号",
    prop: "test",
  },
  {
    label: "号别",
    prop: "test",
  },
  {
    label: "号序",
    prop: "test",
  },

  {
    label: "科室",
    prop: "test",
  },

  {
    label: "医生",
    prop: "test",
  },
  {
    label: "病历",
    prop: "test",
  },
  {
    label: "门诊号",
    prop: "test",
  },
  {
    label: "姓名",
    prop: "test",
  },
  {
    label: "就诊卡",
    prop: "test",
  },
  {
    label: "费别",
    prop: "test",
  },
  {
    label: "金额",
    prop: "test",
  },
  {
    label: "结算方式",
    prop: "test",
  },
  {
    label: "挂号时间",
    prop: "test",
  },
  {
    label: "操作员姓名",
    prop: "test",
  },
  {
    label: "摘要",
    prop: "test",
  },
  {
    label: "预约时间",
    prop: "test",
  },
  {
    label: "病ID",
    prop: "test",
  },
  {
    label: "收费时间",
    prop: "test",
  },
]);
const a = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: [
          {
            test: "数据",
          },
          {
            test: "数据",
          },
        ],
      });
    }, 1000);
  });
};

const { showLoading, tableData, page, pageChange } = usegTablePage(a, {
  a: 1,
});

interface User {
  id: string;
  category: string; //号类
  number: string; // 号别
  department: string; // 科室
  project: string; //项目
  doc: string; // 医生
  hang: number; // 已挂号数
  reservation: number; //已预约数
  record: string; // 建档
  arrange: string | number;
  limit: string | number;
  appointment: string | number;
}
</script>

<style lang="scss" scoped>
.form-inline ::v-deep .el-form-item {
  margin-right: 12px;
}
</style>
